<template>
	<view class=" fs-18  text-center mt-10 ">
		<text>微信授权登录</text>
	</view>
	<view class="px-20 pt-20 ">
		<view class="flex flex-center   flex-column">
			<image class="w-80 h-80 round-circle" :src="WEBCONFIG?.webLogo"></image>
			<text class="fw-600  fs-20 mt-10">{{WEBCONFIG?.webName}}</text>
		</view>
		<button class="bg-blue text-white mt-30 fs-16" @tap="onLogin">一键登录/注册</button>

		<view class="flex  gap-6 fs-14 flex-center  mt-10">
			<view class=" flex flex-center w-20 p-2 h-20 round-circle" :class="status?'border-blue':'border-87'"
				style="border-width: 2px;" @click="status=!status">
				<view class="w-p-100 h-p-100 round-circle bg-blue" v-if="status"></view>
			</view>
			<text>阅读并同意</text>
			<text class="text-blue" @click="$page.open('/pages/tags/index?key=service')">《服务协议》</text>
			<text>和</text>
			<text class="text-blue" @click="$page.open('/pages/tags/index?key=privacy')">《隐私协议》</text>
		</view>
	</view>
	<y-popup ref="userPopup" mode="bottom" round="10" :maskClickClose='false'>
		<y-user @close="userClose" />
	</y-popup>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	import system from '@/utils/system'
	import { useRefs, useWebConfigStore, useUserStore } from '@/stores'
	import { login } from '@/api/login.js'
	import { $tool } from '@/utils'
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const emit = defineEmits(['close'])
	const userPopup = ref(null)
	const status = ref(false)
	const close = () => {
		emit('close')
	}
	onMounted(() => {
		const { hasLogin } = useUserStore()
		if (hasLogin()) {
			emit('close')
		}
	})

	const onLogin = () => {
		if (status.value == false) {
			$tool.toast('请先阅读并同意协议');
			return;
		}
		login(close)
	}
</script>

<style>
	.bg-blue {
		background-color: #3D5CFF;
	}
</style>